<template>
<div id="cinema">
  <div class="dianji">
    <div class="quancheng">
      <span>全城</span>
      <h1 class="iconfont icon-xiala"></h1>
    </div>
    <div class="pinpai">
      <span>品牌</span>
      <h1 class="iconfont icon-xiala"></h1>
    </div>
    <div class="tese">
      <span>特色</span>
      <h1 class="iconfont icon-xiala"></h1>
    </div>
  </div>
  <app-scroll class="content">
    <ul>
      <li class="list" v-for="item in jingdianmdianyingList" :key="item.id">
        <div class="yingcheng">
          <span>{{item.title}}</span>
          <h1>{{item.price}}</h1>
          <h3>元起</h3>
        </div>
        <div class="dizhi">
          <span>{{item.location}}</span>
          <h1>{{item.distance}}</h1>
        </div>
        <div class="xiaochi">
          <span v-for="(items,index) in item.lable" :key="index">
            <h1 class="one" v-if="items.allowRefoud">{{items.allowRefund}}</h1>
            <h1 class="two" v-if="items.endorse">{{items.endorse}}</h1>
            <h1 class="three" v-if="items.vipTag">{{items.vipTag}}</h1>
            <h1 class="four" v-if="items.hallType">{{items.hallType}}</h1>
          </span>
        </div>
        <div class="kaika" v-if="item.discountText!==null">
          <img :src="image" alt="">
          <span>{{item.discountText}}</span>
        </div>
      </li>
    </ul>
  </app-scroll>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data(){
    return{
      image:'//p1.meituan.net/scarlett/ff1c6e33ed0ac3cd862910a83d4bf959583.png'
    }
  },
  computed:{
    ...mapState({
      jingdianmdianyingList:state=>state.cinema.jingdianmdianyingList
    })
  },
  // mounted(){
  //   console.log(data);
  // },
  created(){
    this.$store.dispatch('cinema/requestJingdiandianying')
  }
}
</script>

<style lang="scss" scoped>
#cinema{
  width: 100%;
  height: calc(100% - 44px) !important;
  .dianji{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    div{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 125px;
      height: 40px;
      font-size: 13px;
      color: #777777;
      h1{
        width: 8px;
        height: 8px;
        margin: 0 0 0 4px;
        font-size: 6px;
      }
    }
  }
  .content{
    width: 100%;
    height: calc(100% - 40px) !important;
    .list{
      display: flex;
      flex-direction: column;
      width: 343px;
      height: 99px;
      margin: 0 0 0 15px;
      padding: 13px 15px 13px 0;
      box-sizing: border-box;
      border-bottom: 1PX solid #cccccc;
      div{
        display: flex;
        align-items: center;
        width: 328px;
      }
      .yingcheng{
        width: 328px;
        height: 23px;
        font-size: 16px;
        color: #000000;
        h1{
          font-size: 18px;
          color: #f03d37;
        }
        h3{
          font-size: 13px;
          color: #f03d37;
        }
      }
      .dizhi{
        width: 328px;
        height: 19px;
        margin: 6px 0 0;
        color: #666666;
        font-size: 13px;
        span{
          width: 277px;
          height: 19px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        h1{
          margin-left: 5px;
        }
      }
      .xiaochi{
        color: #0000ee;
        height: 17px;
        margin: 4px 0;
        .one{
          font-size: 12px;
          color: #589daf;
          padding: 0 3px;
          border: 1px solid #589daf;
        }
        .two{
          font-size: 12px;
          color: #589daf;
          margin: 0 0 0 5px;
          padding: 0 3px;
          border: 1px solid #589daf;
        }
        .three{
          font-size: 12px;
          color: #ff9900;
          margin: 0 0 0 5px;
          padding: 0 3px;
          border: 1px solid #ff9900;
        }
        .four{
          font-size: 12px;
          color: #ff9900;
          margin: 0 0 0 5px;
          padding: 0 3px;
          border: 1px solid #ff9900;
        }
      }
      .kaika{
        height: 21px;
        width: 328px;
        img{
          width: 15px;
          height: 14px;
        }
        span{
          font-size: 12px;
          color: #999;
          height: 18px;
          line-height: 18px;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>